<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据表格</title>
<link href="../../css/bootstrap.css" rel="stylesheet">
<!-- <link href="../../css/font-awesome.css" rel="stylesheet"> -->
<link href="../../css/koala.css" rel="stylesheet">
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="../../js/bootstrap.min.js" type="text/javascript" ></script>
<script src="../../js/Koala_Grid.js" type="text/javascript" ></script>
<script src="../../js/Koala_Select.js" type="text/javascript" ></script>
<script src="../../js/data.js" type="text/javascript" ></script>
<script>

$(function(){
	
	var buttons = [
			{content: '<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-plus"><span>创建</button>', action: 'add'},
            {content: '<button class="btn btn-success" type="button"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改</button>', action: 'modify'},
            {content: '<button class="btn btn-danger" type="button"><span class="glyphicon glyphicon-remove"></span>&nbsp;删除</button>', action: 'delete'}
            ];
	
	$("#myGrid").grid({
		 identity: 'id',
         columns: columns,
         buttons: buttons,
         querys: [{title: '角色名称', value: 'name'},{title: '角色描述', value: 'roleDesc'}],
         isUserLocalData:true,			//如果为false，则发送ajax请求到url端，获取数据，否则，则视为获取静态数据
         url:"../../js/data.js",
         localData:staticData
         ,isShowIndexCol:true
         //,lockWidth: true
    }).on({
    	
    	'add': function(){
    		alert("add action");
    	},
    	'modify': function(event, data){
			alert("modify action");
    	},
    	'delete': function(event, data){
            alert('delete action');
    	}
    });
	
})
</script>
</head>
<body>
<div id="myGrid"></div>
</body>
</html>